<template>
	<!-- 推广赚钱 -->
	<view class="spread">
		<view class="spread-back">
			<view class="referee">推荐人：{{userinfo.pUser}}</view>
			<view class="personal">
				<view class="avataeImg">
					<image :src="userinfo.avatar" mode=""></image>
				</view>
				<view class="title-text">{{userinfo.nickname}}</view>
			</view>
		</view>
		<view class="spread-main">
			<view class="spreadMain-withdrawalInfo">
				<view class="withdrawal-box">
					<view class="kickback">可提现佣金(元)</view>
					<view class="count can">{{userinfo.brokerage_wait}}</view>
					<view class="tixian withdButtom">提现</view>
				</view>
				<view class="line"></view>
				<view class="withdrawal-box">
					<view class="kickback">累计提现(元)</view>
					<view class="count sum">{{userinfo.brokerage_already}}</view>
					<view class="tixian record" @tap="record">提现记录</view>
				</view>
			</view>
			<view class="spreadMain-box">
				<view class="boxList">
					<view class="list-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/withdraw.png" mode="aspectFill"></image>
					</view>
					<view class="list-text">佣金明细</view>
				</view>
				<view class="boxList">
					<view class="list-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/team.png" mode="aspectFill"></image>
					</view>
					<view class="list-text">我的团队</view>
				</view>
				<view class="boxList">
					<view class="list-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/code.png" mode="aspectFill"></image>
					</view>
					<view class="list-text">我的推广二维码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/component/commen/api/util.js';
	export default {
		data() {
			return {
				userinfo: "", //个人信息数据
			};
		},
		onShow() {
			this.getUserinfo()
		},
		methods: {
			getUserinfo() { //获取个人信息
				var params = {
					do: "user",
					uid: uni.getStorageSync("uid")
				}
				util.requestWithSign(params).then(res => {
					console.log("我的信息数据：", res)
					this.userinfo = res.data
				})
				var obj = {
					do: "brokerage",
					op: "set"
				}
				util.requestWithSign(obj).then(res => {
					console.log("111", res)
				})
			},
			record(){//点击提现记录
				uni.navigateTo({
					url:"/otherPages/record/record"
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.spread {
		.spread-back {
			width: 100%;
			height: 304rpx;
			background-image: linear-gradient(270deg, #00b388, #72dcc3);

			.referee {
				font-size: 25rpx;
				// width: 300rpx;
				padding: 10rpx;
				text-align: center;
				color: #fff;
				position: absolute;
				top: 30rpx;
				right: 20rpx;
				padding: 5rpx 20rpx;
				box-sizing: border-box;
				border-radius: 24rpx;
				border: 2rpx solid #fff;

			}

			.personal {
				padding-top: 30rpx;
				width: 120rpx;
				margin: 0 auto;
				// border: 1px solid #f00;
				.avataeImg {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						// border: 1px solid #000;
					}
				}

				.title-text {
					margin-top: 20rpx;
					width: 100%;
					text-align: center;
					color: #fff;
					font-weight: bold;
				}
			}
		}

		.spread-main {
			padding: 0 20rpx;
			box-sizing: border-box;
			.spreadMain-withdrawalInfo{
				display: flex;
				width: 100%;
				background: #fff;
				padding: 20rpx;
				padding-bottom: 40rpx;
				border-radius: 30rpx;
				margin-top: -85rpx;
				border-radius: 30rpx;
				justify-content: space-between;
				box-sizing: border-box;
				.line{
					width: 2rpx;
					height: 140rpx;
					background-color: #eeeeef;
				}
				.withdrawal-box{
					width: 100%;
					text-align: center;
					// border: 1px solid #f00;
					.kickback{
						font-size: 26rpx;
						color: #838383;
					}
					.count{
						font-size: 50rpx;
						margin-top: 20rpx;
						font-weight: bold;
					}
					.can{
						color: #00b388
					}
					.sum{
						// color: #838383;
					}
					.tixian{
						width: 150rpx;
						padding: 10rpx 20rpx;
						border-radius: 30rpx;
						margin: 0 auto;
						margin-top: 20rpx;
					}
					.withdButtom{
						background: #00b388;
						color: #fff;
					}
					.record{
						border: 2rpx solid #b4b4b4;
						color: #b4b4b4;
					}
				}
			}
			.spreadMain-box{
				padding: 40rpx 20rpx;
				box-sizing: border-box;
				background: #fff;
				margin-top: 20rpx;
				border-radius: 30rpx;
				display: flex;
				.boxList{
					// width: 33%;
					// margin-right: 20rpx;
					flex: 1;
					.list-img{
						margin: 0 auto;
						width: 60rpx;
						height: 60rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.list-text{
						font-size: 25rpx;
						margin-top: 10rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>